<template>
  <!-- 信息弹窗面板 -->
  <div class="info-popup-box">
    <div class="popup-line"></div>

    <div class="popup-body">
      <div class="popup-header">
        <span>建筑信息</span>
      </div>

      <div v-if="data" class="popup-content">
        <div class="content-item">
          <span class="item-left">1</span>
          <span class="item-right">1</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },
  props: {
    data: {
      type: Object,
      default: () => null
    }
  },
  methods: {},
  created () { },
  mounted () { }
};
</script>
<style lang="less" scoped>
.info-popup-box {
  position: absolute;
  display: none;
  user-select: none;

  .popup-line {
    position: absolute;
    top: -94px;
    left: -32px;
    width: 65px;
    height: 110px;
    background: url(~@/assets/image/vectorData/iQuery/popup-bottom.png) no-repeat center center;
    background-size: 100% 100%;
  }

  .popup-body {
    position: absolute;
    top: -285px;
    left: -63px;
    width: 285px;
    height: 184px;
    background: url(~@/assets/image/vectorData/iQuery/popup-bg.png) no-repeat center center;
    background-size: 100% 100%;

    .popup-header {
      position: relative;
      display: flex;
      align-items: center;
      width: 283px;
      height: 50px;
      padding-left: 28px;
      box-sizing: border-box;
      background: url(~@/assets/image/vectorData/iQuery/popup-title.png) no-repeat center center;
      background-size: 100% 100%;

      span {
        font-size: 20px;
        font-family: PangMenZhengDao;
        color: #fff;
        text-shadow: 0 2px 4px rgba(2, 54, 106, .5), 0 1px 4px rgba(3, 167, 198, .25);
        background: linear-gradient(180deg, #fff, #90deff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .close-btn {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-60%);
        cursor: pointer;
      }
    }

    .popup-content {
      width: 98%;
      height: calc(100% - 75px);
      overflow-y: auto;
      padding: 16px 18px 0px 21px;
      box-sizing: border-box;

      .content-item {
        display: flex;
        align-items: center;

        &:nth-child(n + 2) {
          margin-top: 16px;
        }

        span {
          display: flex;
          align-items: center;
          font-size: 15px;
          color: #EAF5FF;
        }

        .item-left {
          width: 80px;
          margin-right: 8px;
        }

        .item-right {
          display: inline-block;
          box-sizing: border-box;
          width: calc(100% - 88px);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>